<template>
  <div class="userAccountCon">
		<div class="body_show" style="padding:0 10px;">
		  <div class="row" style="margin-bottom: 10px;">
			      <div class="col-xs-12">
			        <h4 style="margin-top:1em;">添加用户:</h4>
			      </div>
			    </div>
			    <div class="row">
			      <div class="col-xs-12  col-md-3">
			        <el-input placeholder="请输入身份证号" v-model="username"></el-input>
			      </div>
			      <div class="col-xs-12  col-md-3">
			        <el-input placeholder="请输入用户密码" v-model="password"><!--<template slot="prepend">ID</template>--></el-input>
			      </div>
			      <div class="col-xs-12  col-md-2">
			        <el-select clearable   v-model="role" placeholder="请选择用户角色">
			          <el-option label="管理员" value="2">管理员</el-option>
			          <el-option label="普通用户" value="3">普通用户</el-option>
			        </el-select>
			      </div>
			      <div class="col-xs-12  col-md-2">
			        <el-select clearable  v-model="menuType" placeholder="请选择业务角色">
			          <el-option v-for="item in menuAll"  :label="item.desc" :value="item.role">{{item.desc}}</el-option>
			        </el-select>
			      </div>
			      <div class="col-xs-12  col-md-2">
			        <el-button @click="addMenuList()">确认添加</el-button>
			      </div>
			    </div>
			    <div class="row" style="padding:10px 0;">
			    	 <div class="col-xs-12">
			        <h4 >已添加用户列表:</h4>
			      </div>
			    </div>
			    <div class="row" style="padding:0 10px;overflow-x: auto;">
							<table class="table" style="min-width: 1000px;">
						      <thead>
						        <tr>
						          <th>用户名</th>
						          <th>密码</th>
						          <th>身份</th>
						        </tr>
						      </thead>
						      <tbody >
						        <tr v-for="item in allUser">
						          <th scope="row">{{item.user}}</th>
						          <td>{{item.password}}</td>
						          <td>{{getDesc(item.business_role)}}</td>
						        </tr>
						      </tbody>
						    </table>
					</div>
					
		</div>
  </div>
</template>

<script>
export default {
  name: 'userAccountCon',
  data () {
    return {
    	menuType:"",
    	activeName:"",
    	//关于 topic bundle  pid 相关参数
    	topicid:"",
    	topicname:"",
    	bundleid:"",
    	bundlename:"bundle(无)",
    	boundListShow:"",//显示的bundlelist
    	pid:"",
    	pname:"Pid(无)",
    	pidAll:[],
    	menuAll:"",
    	username:"",
    	password:"",
    	allUser:"",
    	role:"",
    }
  },
  mounted(){
  	this.topicid = this.$route.query.id;
  	this.topicname = this.$route.query.name;
  	this.getBundleId();
  },
   watch:{
    	'$route' :"fetchDate"
    },
  methods:{
  		fetchDate(){
        var self = this;
        this.topicid = this.$route.query.id;
        this.topicname = this.$route.query.name;
        this.bundle_id = "";
  			this.bundlename = "Bundle(无)";
  			this.pidAll = [];
  			this.pid = "";
  			this.pname = "Pid(无)";
  			self.bundlename = "无可显示列表，如有需要请添加";
    		self.pidAll = [];
    		self.menuAll = [];
  			self.allUser = [];
        var self = this;
        this.getBundleId();
      },
		//添加或获取 user 用户列表 action 1 、添加 2、获取
		getOrAddUser(action,user_name,password,business_role,topic,bundle_id,pid,callBack){
			var self = this;
			if(action == 1 && !this.role){
					self.$Message.error("请选择用户角色!");
			}
			var access_token = localStorage.getItem("access_token");
			var params = {
				access_token:access_token,
				action:action,
				user_name:user_name,//	用户名	string	否（action为1时必须）
				password:password,	//用户密码	string	否（action为1时必须）
				role:parseInt(self.role),	//用户角色	int	否 （action为1时必须1：管理员 2：普通用户）
				business_role:parseInt(business_role),	//用户业务角色	int	否 （具体业务用户角色细分，详见酒店系统用户角色表）
				topic:topic,	//用户属于的topic	string	否 （视具体业务而定）
				bundle_id:bundle_id,//	用户属于的一级ID	string	否 （视具体业务而定）
				pid:pid, //	用户属于的pid	string	否 （视具体业务而定）
			}
			this.postRequest(this,edition,'auto_menu/get_add_user',params,function(userRes){
				if(!!callBack){
					callBack(userRes);
				}
    	});
		},
  	addMenuList(){
  		var self = this;
  		if(this.username.length < 0){
  			//
  		}
  		this.getOrAddUser(1,this.username,this.password,this.menuType,this.topicid,this.bundleid,this.pid,function(userRes){
  			if(userRes.data.state){
  				self.$Message.success("添加用户成功!");
  				self.username = "";
  				self.password = "";
  				self.getTopicDIrectSubs(self.topicid,self.bundleid,self.pid);
  			}
  		})
  	},
  	PidChange(name,id){
  		var self = this;
  		this.pid = id;
  		this.pname = name;
  		self.getTopicDIrectSubs(self.topicid,self.bundleid,self.pid)
  	},
  	getAllThis(val){
  		var self = this;
  		if(val == "bundle"){
  			this.bundleid = "";
  			this.bundlename = "Bundle(无)";
  			this.pidAll = [];
  			this.pid = "";
  			this.pname = "Pid(无)";
  		}else if(val == "pid"){
  			this.pid = "";
  			this.pname = "Pid(无)";
  		}
  		self.getTopicDIrectSubs(self.topicid,self.bundleid,self.pid)
  	},
  	getTopicDIrectSubs(topic,bundle_id,pid){
  		var self = this;
  		var access_token = localStorage.getItem("access_token");
  		var params = {
  			access_token:access_token,
  			topic:topic,
  			bundle_id:bundle_id,
  			pid:pid,
  		}
  		this.postRequest(this,edition,'log/get_topic_direct_subs',params,function(subs){
  			if(!!subs.data.data.roles){
  				self.menuAll = subs.data.data.roles;
  			}else{
  				self.menuAll = [];
  			}
  			if(subs.data.data.users.length > 0){
  				self.allUser = subs.data.data.users;
  			}else{
  				self.allUser = [];
  			}
    	});
  	},
  	getDesc(val){
  		if(this.menuAll.length > 0){
  			var retuAr;
  			this.menuAll.forEach(function(str,idx,arr){
	  			if(str.role == val){
	  				retuAr = str.desc;
	  			}
  			})
  			if(!!retuAr){
  				return retuAr
  			}else{
  				return val+"(无)";
  			}
  		}else{
  			return val+"(无)";
  		}
  	}
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.userAccountCon{
	/*padding:10px;*/
}
</style>
